<template>
  <div class="wrapper">
    <v-form-designer ref="vfdRef" :form-json="props.formJson" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps, defineExpose, onUnmounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const vfdRef = ref(null);
// import { useStore } from '@/store'
// const store = useStore()
const store = {
  state: {
    user: {
      formPreviewType: 1,
    },
  },
};
// const formJson = ref({
//   widgetList: [
//     {
//       type: 'static-text',
//       icon: 'static-text',
//       formItemFlag: false,
//       options: {
//         name: 'statictext111193',
//         columnWidth: '200px',
//         hidden: false,
//         textContent: '',
//         customClass: [],
//         onCreated: '',
//         onMounted: '',
//         label: 'static-text'
//       },
//       id: 'statictext111193'
//     },
//     {
//       type: 'grid',
//       category: 'container',
//       icon: 'grid',
//       cols: [
//         {
//           type: 'grid-col',
//           category: 'container',
//           icon: 'grid-col',
//           internal: true,
//           widgetList: [
//             {
//               type: 'input',
//               icon: 'text-field',
//               formItemFlag: true,
//               options: {
//                 name: 'input101987',
//                 label: '申请人',
//                 labelAlign: '',
//                 type: 'text',
//                 defaultValue: '',
//                 placeholder: '',
//                 columnWidth: '200px',
//                 size: '',
//                 labelWidth: null,
//                 labelHidden: false,
//                 readonly: false,
//                 disabled: false,
//                 hidden: false,
//                 clearable: true,
//                 showPassword: false,
//                 required: false,
//                 validation: '',
//                 validationHint: '',
//                 customClass: '',
//                 labelIconClass: null,
//                 labelIconPosition: 'rear',
//                 labelTooltip: null,
//                 minLength: null,
//                 maxLength: null,
//                 showWordLimit: false,
//                 prefixIcon: '',
//                 suffixIcon: '',
//                 appendButton: false,
//                 appendButtonDisabled: false,
//                 buttonIcon: 'el-icon-search',
//                 onCreated: '',
//                 onMounted: '',
//                 onInput: '',
//                 onChange: '',
//                 onFocus: '',
//                 onBlur: '',
//                 onValidate: ''
//               },
//               id: 'input101987'
//             }
//           ],
//           options: {
//             name: 'gridCol78314',
//             hidden: false,
//             span: 12,
//             offset: 0,
//             push: 0,
//             pull: 0,
//             responsive: false,
//             md: 12,
//             sm: 12,
//             xs: 12,
//             customClass: ''
//           },
//           id: 'grid-col-78314'
//         }
//       ],
//       options: { name: 'grid109613', hidden: false, gutter: 12, customClass: [] },
//       id: 'grid109613'
//     },
//     {
//       type: 'grid',
//       category: 'container',
//       icon: 'grid',
//       cols: [
//         {
//           type: 'grid-col',
//           category: 'container',
//           icon: 'grid-col',
//           internal: true,
//           widgetList: [
//             {
//               type: 'input',
//               icon: 'text-field',
//               formItemFlag: true,
//               options: {
//                 name: 'input95851',
//                 label: '申请部门',
//                 labelAlign: '',
//                 type: 'text',
//                 defaultValue: '',
//                 placeholder: '',
//                 columnWidth: '200px',
//                 size: '',
//                 labelWidth: null,
//                 labelHidden: false,
//                 readonly: false,
//                 disabled: false,
//                 hidden: false,
//                 clearable: true,
//                 showPassword: false,
//                 required: false,
//                 validation: '',
//                 validationHint: '',
//                 customClass: [],
//                 labelIconClass: null,
//                 labelIconPosition: 'rear',
//                 labelTooltip: null,
//                 minLength: null,
//                 maxLength: null,
//                 showWordLimit: false,
//                 prefixIcon: '',
//                 suffixIcon: '',
//                 appendButton: true,
//                 appendButtonDisabled: false,
//                 buttonIcon: 'el-icon-search',
//                 onCreated: '',
//                 onMounted: '',
//                 onInput: '',
//                 onChange: '',
//                 onFocus: '',
//                 onBlur: '',
//                 onValidate: ''
//               },
//               id: 'input95851'
//             }
//           ],
//           options: {
//             name: 'gridCol9704',
//             hidden: false,
//             span: 12,
//             offset: 0,
//             push: 0,
//             pull: 0,
//             responsive: false,
//             md: 12,
//             sm: 12,
//             xs: 12,
//             customClass: []
//           },
//           id: 'grid-col-9704'
//         },
//         {
//           type: 'grid-col',
//           category: 'container',
//           icon: 'grid-col',
//           internal: true,
//           widgetList: [
//             {
//               type: 'date',
//               icon: 'date-field',
//               formItemFlag: true,
//               options: {
//                 name: 'date75919',
//                 label: '申请日期',
//                 labelAlign: '',
//                 type: 'date',
//                 defaultValue: null,
//                 placeholder: '',
//                 columnWidth: '200px',
//                 size: '',
//                 labelWidth: null,
//                 labelHidden: false,
//                 readonly: false,
//                 disabled: false,
//                 hidden: false,
//                 clearable: true,
//                 editable: false,
//                 format: 'yyyy-MM-dd',
//                 valueFormat: 'yyyy-MM-dd',
//                 required: false,
//                 validation: '',
//                 validationHint: '',
//                 customClass: [],
//                 labelIconClass: null,
//                 labelIconPosition: 'rear',
//                 labelTooltip: null,
//                 onCreated: '',
//                 onMounted: '',
//                 onChange: '',
//                 onFocus: '',
//                 onBlur: '',
//                 onValidate: ''
//               },
//               id: 'date75919'
//             }
//           ],
//           options: {
//             name: 'gridCol67512',
//             hidden: false,
//             span: 12,
//             offset: 0,
//             push: 0,
//             pull: 0,
//             responsive: false,
//             md: 12,
//             sm: 12,
//             xs: 12,
//             customClass: []
//           },
//           id: 'grid-col-67512'
//         },
//         {
//           type: 'grid-col',
//           category: 'container',
//           icon: 'grid-col',
//           internal: true,
//           widgetList: [],
//           options: {
//             name: 'gridCol74419',
//             hidden: false,
//             span: 12,
//             offset: 0,
//             push: 0,
//             pull: 0,
//             responsive: false,
//             md: 12,
//             sm: 12,
//             xs: 12,
//             customClass: ''
//           },
//           id: 'grid-col-74419'
//         }
//       ],
//       options: { name: 'grid63405', hidden: false, gutter: 12, customClass: '' },
//       id: 'grid63405'
//     },
//     {
//       type: 'grid',
//       category: 'container',
//       icon: 'grid',
//       cols: [
//         {
//           type: 'grid-col',
//           category: 'container',
//           icon: 'grid-col',
//           internal: true,
//           widgetList: [
//             {
//               type: 'select',
//               icon: 'select-field',
//               formItemFlag: true,
//               options: {
//                 name: 'select71837',
//                 label: '请假类型',
//                 labelAlign: '',
//                 defaultValue: '',
//                 placeholder: '',
//                 columnWidth: '200px',
//                 size: '',
//                 labelWidth: null,
//                 labelHidden: false,
//                 disabled: false,
//                 hidden: false,
//                 clearable: true,
//                 filterable: false,
//                 allowCreate: false,
//                 remote: false,
//                 automaticDropdown: false,
//                 multiple: false,
//                 multipleLimit: 0,
//                 optionItems: [{ value: '1', label: '总经办' }],
//                 required: false,
//                 validation: '',
//                 validationHint: '',
//                 customClass: [],
//                 labelIconClass: null,
//                 labelIconPosition: 'rear',
//                 labelTooltip: null,
//                 onCreated: '',
//                 onMounted: '',
//                 onRemoteQuery: '',
//                 onChange: '',
//                 onFocus: '',
//                 onBlur: '',
//                 onValidate: ''
//               },
//               id: 'select71837'
//             }
//           ],
//           options: {
//             name: 'gridCol18846',
//             hidden: false,
//             span: 24,
//             offset: 0,
//             push: 0,
//             pull: 0,
//             responsive: false,
//             md: 12,
//             sm: 12,
//             xs: 12,
//             customClass: []
//           },
//           id: 'grid-col-18846'
//         }
//       ],
//       options: { name: 'grid82940', hidden: false, gutter: 12, customClass: '' },
//       id: 'grid82940'
//     },
//     {
//       type: 'grid',
//       category: 'container',
//       icon: 'grid',
//       cols: [
//         {
//           type: 'grid-col',
//           category: 'container',
//           icon: 'grid-col',
//           internal: true,
//           widgetList: [
//             {
//               type: 'select',
//               icon: 'select-field',
//               formItemFlag: true,
//               options: {
//                 name: 'select78072',
//                 label: '请假事由',
//                 labelAlign: '',
//                 defaultValue: '',
//                 placeholder: '',
//                 columnWidth: '200px',
//                 size: '',
//                 labelWidth: null,
//                 labelHidden: false,
//                 disabled: false,
//                 hidden: false,
//                 clearable: true,
//                 filterable: false,
//                 allowCreate: false,
//                 remote: false,
//                 automaticDropdown: false,
//                 multiple: false,
//                 multipleLimit: 0,
//                 optionItems: [
//                   { value: '1', label: '事假' },
//                   { value: '2', label: '调休' }
//                 ],
//                 required: false,
//                 validation: '',
//                 validationHint: '',
//                 customClass: [],
//                 labelIconClass: null,
//                 labelIconPosition: 'rear',
//                 labelTooltip: null,
//                 onCreated: '',
//                 onMounted: '',
//                 onRemoteQuery: '',
//                 onChange: '',
//                 onFocus: '',
//                 onBlur: '',
//                 onValidate: ''
//               },
//               id: 'select78072'
//             }
//           ],
//           options: {
//             name: 'gridCol14757',
//             hidden: false,
//             span: 12,
//             offset: 0,
//             push: 0,
//             pull: 0,
//             responsive: false,
//             md: 12,
//             sm: 12,
//             xs: 12,
//             customClass: []
//           },
//           id: 'grid-col-14757'
//         }
//       ],
//       options: { name: 'grid49116', hidden: false, gutter: 12, customClass: [] },
//       id: 'grid49116'
//     },
//     {
//       type: 'grid',
//       category: 'container',
//       icon: 'grid',
//       cols: [
//         {
//           type: 'grid-col',
//           category: 'container',
//           icon: 'grid-col',
//           internal: true,
//           widgetList: [
//             {
//               type: 'input',
//               icon: 'text-field',
//               formItemFlag: true,
//               options: {
//                 name: 'input20247',
//                 label: '部门审批',
//                 labelAlign: '',
//                 type: 'text',
//                 defaultValue: '',
//                 placeholder: '',
//                 columnWidth: '200px',
//                 size: '',
//                 labelWidth: null,
//                 labelHidden: false,
//                 readonly: false,
//                 disabled: false,
//                 hidden: false,
//                 clearable: true,
//                 showPassword: false,
//                 required: false,
//                 validation: '',
//                 validationHint: '',
//                 customClass: [],
//                 labelIconClass: null,
//                 labelIconPosition: 'rear',
//                 labelTooltip: null,
//                 minLength: null,
//                 maxLength: null,
//                 showWordLimit: false,
//                 prefixIcon: '',
//                 suffixIcon: '',
//                 appendButton: false,
//                 appendButtonDisabled: false,
//                 buttonIcon: 'el-icon-search',
//                 onCreated: '',
//                 onMounted: '',
//                 onInput: '',
//                 onChange: '',
//                 onFocus: '',
//                 onBlur: '',
//                 onValidate: ''
//               },
//               id: 'input20247'
//             }
//           ],
//           options: {
//             name: 'gridCol10575',
//             hidden: false,
//             span: 24,
//             offset: 0,
//             push: 0,
//             pull: 0,
//             responsive: false,
//             md: 12,
//             sm: 12,
//             xs: 12,
//             customClass: ''
//           },
//           id: 'grid-col-10575'
//         }
//       ],
//       options: { name: 'grid30617', hidden: false, gutter: 12, customClass: '' },
//       id: 'grid30617'
//     }
//   ],
//   formConfig: {
//     modelName: 'formData',
//     refName: 'vForm',
//     rulesName: 'rules',
//     labelWidth: 80,
//     labelPosition: 'left',
//     size: '',
//     labelAlign: 'label-right-align',
//     cssCode: '',
//     customClass: [],
//     functions: '',
//     layoutType: 'PC',
//     jsonVersion: 3,
//     onFormCreated: '',
//     onFormMounted: '',
//     onFormDataChange: ''
//   }
// })

const props = defineProps({
  formJson: {
    type: Object,
    default: () => ({
      widgetList: [],
      formConfig: {},
    }),
  },
});

const init = () => {
  var header = document.querySelector(".main-header");
  // header.style.display = 'none'
};

const initForm = () => {
  console.log("form", vfdRef.value, "formJson", props.formJson);
  console.log("formPreviewTyp", store.state.user?.formPreviewType);
  if (store.state.user.formPreviewType === 0) {
    // 预览
    vfdRef.value?.clearDesigner();
  }
  if (store.state.user.formPreviewType === 1) {
    // 设计
    // vfdRef.value?.clearDesigner()
    vfdRef.value?.setFormJson(props.formJson);
  }
  // 预览表单
  if (store.state.user.formPreviewType === 2) {
    vfdRef.value?.previewForm();
    vfdRef.value?.setFormJson(props.formJson);
  }
};

defineExpose({
  vfdRef,
  initForm,
});

onMounted(() => {
  init();
});

onUnmounted(() => {
  vfdRef.value?.clearDesigner();
});
</script>

<style lang="scss" scoped>
body {
  margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</style>
